<template>
	<view class="">
		<NavBar title="积分记录" :isShowLeftBtn="true">
		</NavBar>
	</view>
	<view class="content" :style="{minHeight:contentHeight}">
		<view class="main">
			<scroll-view scroll-y="true" :style="{height: contentHeight }" :refresher-threshold="100"
				@scrolltolower="scrolltolowerFun" refresher-enabled="true" refresher-default-style="none">
				<view class="main_list">
					<view class="main_item  m_b_28 flex_both" v-for="(item,index) in mainList" :key="index">
						<!-- <view class="m_b_28 flex_both">
							<text class="f_28_0_b">
								{{item.memo}}
							</text>
							<text class="f_22_9" style="color: #979696;">
								{{item.createtime}}
							</text>
						</view>
						<view class="flex_both">
							<text class="f_26_0" style="color: #979696;">
								{{isredum(item.money)}}
							</text>
						
						</view> -->

						<view class="">
							<up-image :show-loading="true" :src="item.image" width="150rpx" height="170rpx" mode="widthFix"></up-image>
						</view>
						<view class="">
							<view class="m_b_16" style="width: 480rpx;">
								<text class="f_30_0_b u-line-1">
									{{item.memo}}
								</text>
							</view>
							<view class="">
								<view class="flex" style="width: 480rpx;">
									<text class="f_26_0" style="color: #979696;">
										{{item.memo1}}
									</text>
								</view>
								<view class="flex" style="width: 480rpx;">
									<text class="f_26_0 u-line-1" style="color: #979696;">
										时间：{{item.createtime}}
									</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="empty_box" v-if="!loadShow &&mainList.length ==  0">
					<view class="">
						<up-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
						</up-empty>
					</view>
				</view>
				<view class="loading_box m_t_32 " style="padding-bottom: 32rpx;" v-if="loadShow">
					{{ loadMessage }}
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { ref, reactive, getCurrentInstance } from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import NavBar from "@/components/navbar.vue"
	const { proxy } = getCurrentInstance()
	const contentHeight = ref('100vh')
	const statusBarHeight = ref(88)
	onLoad(() => {
		uni.getSystemInfo({
			success: function (info) {
				statusBarHeight.value = (info.statusBarHeight + 44) * 2
				contentHeight.value = `calc(100vh - ${statusBarHeight.value + 76}rpx)`
			}
		});
		pointsLog()
	})
	// 
	const page = ref(1)
	const loadShow = ref(false)
	const loadMessage = ref('加载中')
	const scrolltolowerFun = () => {
		if (loadShow.value) return
		page.value = ++page.value;
		loadShow.value = true;
		setTimeout(() => {
			pointsLog()
		}, 1000)
	}
	const mainList = ref([])
	const pointsLog = async () => {
		if (loadMessage.value == '没有更多了') {
			loadShow.value = true;
			setTimeout(() => {
				loadShow.value = false;
			}, 200)
			return
		}
		let res = await proxy.$http('points.pointsLog', { page: page.value })
		let data = res.data.data
		if (res.code == 1) {
			if (data.length == 0) {
				loadMessage.value = "没有更多了"
			} else {
				mainList.value.push(...data)
			}
		} else {
			loadMessage.value = "加载出错"
		}
		setTimeout(() => {
			loadShow.value = false;
		}, 200)
	}
	const isredum = (e) => {
		if (e.indexOf('-') != -1) {
			return e
		} else {
			return '+' + e
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		background: #F7F8FC;
		padding: 20rpx;
		padding-bottom: 64rpx;

		.main_list {
			padding: 24rpx 0;
			overflow: auto;

			.main_item {
				padding: 22rpx 24rpx;
				background: #FFFFFF;
				box-shadow: 2rpx 7rpx 5rpx 0rpx rgba(197, 197, 197, 0.29);
				border-radius: 5rpx;
			}
		}

	}
	::v-deep.u-image {
		display: flex;
		align-items: center;
	}
</style>